<template>
  <view class="parking-place">
    <view class="park-top box-shadow">
      <u-navbar placeholder="true">
        <view class="u-nav-slot" slot="left">
          <view class="search">
            <u-search placeholder="提前找找目的地停车位" :showAction="false" v-model="searchValue"
                      :clearabled="false"></u-search>
          </view>
        </view>
      </u-navbar>
      <view class="tabs">
        <view class="wp">
          <view class="ul flex-cb">
            <view class="li" v-for="(item,index) in tabs" :key="index" @click="tabClick(index)"
                  :class="{'active':activeTab==index}">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="park-cont flex-a">
      <scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" class="scroll-Y">
        <mapBox :latitude="latitude" :longitude="longitude" :markers="markers"/>
        <view class="tablist">
          <!-- 所有 -->
          <view class="tabcont" v-show="activeTab=='0'">
            <view class="laybox flex-col flex-c">
              <view class="lay-tit">
                <view class="txt flex-cc">上拉展开附近停车场
                  <view class="jt">
                    <u-icon name="arrow-up" color="#1C274C99"></u-icon>
                  </view>
                </view>
              </view>
              <view class="lay-cont">
                <view class="list">
                  <block v-for="(item,index) in processedParkList" :key="index">
                    <view class="li" @click="jumpDetail(item)">
                      <view class="item">
                        <!-- <view class="near" v-if="item.isTop">距离最近</view> -->
                        <view class="near" v-if="false">距离最近</view>
                        <view class="row1">{{ item.name }}</view>
                        <view class="row2 flex-cb">
                          <view class="left">
                            <view class="dd flex-ac">
                              <view class="icon">
                                <image :src="imageUrl +'parking/icon_park.png'" mode="widthFix">
                                </image>
                              </view>
                              <view class="info flex-ac">
                                <view class="txt1">{{ item.typeKeyword == 'in' ? '道路停车' : '公共停车场' }}
                                  <text
                                      v-if="false">|
                                  </text>
                                </view>
                                <view class="tag" :class="item.tcClass" v-if="false">
                                  {{ item.tcText }}
                                </view>
                              </view>
                            </view>
                            <view class="dd flex-ac">
                              <view class="icon">
                                <image :src="imageUrl +'parking/icon_map.png'" mode="widthFix">
                                </image>
                              </view>
                              <view class="info ep1">
                                {{ item.address || '未设置地址' }}
                              </view>
                            </view>
                          </view>
                          <view class="right">
                            <view class="go">
                              <image :src="imageUrl +'parking/icon_go.png'" mode="widthFix">
                              </image>
                            </view>
                            <view class="km">{{ item.parkToUserDistance }}km</view>
                          </view>
                        </view>
                        <view class="row3 flex-cb">
                          <view class="zt">
                            <text :class="item.statusClass">{{ item.statusText }}</text>
                          </view>
                          <view class="per flex">
                            <view class="txt1">
                              <text :class="item.statusClass">{{ item.freeCount }}</text>
                            </view>
                            <view class="txt2">/ {{ item.spaceCount }}</view>
                          </view>
                          <view class="step flex-ac">
                            <view class="jd" :class="item.statusClass" :style="{ width: item.progressWidth }"></view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </block>
                </view>
              </view>
            </view>

          </view>
          <!-- 停车场 -->
          <view class="tabcont" v-show="activeTab=='1'">
            <view class="laybox flex-col flex-c">
              <view class="lay-tit lay-tit2 flex-cc">
                <view class="bar"></view>
              </view>
              <view class="lay-cont">
                <view class="list">
                  <block v-for="(item,index) in processedParkList" :key="index">
                    <view class="li" v-if="item.typeKeyword=='in'" @click="jumpDetail(item)">
                      <view class="item">
                        <view class="near" v-if="false">距离最近</view>
                        <view class="row1">{{ item.name }}</view>
                        <view class="row2 flex-cb">
                          <view class="left">
                            <view class="dd flex-ac">
                              <view class="icon">
                                <image :src="imageUrl +'parking/icon_park.png'" mode="widthFix">
                                </image>
                              </view>
                              <view class="info flex-ac">
                                <view class="txt1">{{ item.typeKeyword == 'in' ? '道路停车' : '公共停车场' }}
                                  <text
                                      v-if="false">|
                                  </text>
                                </view>
                                <view class="tag" :class="item.tcClass" v-if="false">
                                  {{ item.tcText }}
                                </view>
                              </view>
                            </view>
                            <view class="dd flex-ac">
                              <view class="icon">
                                <image :src="imageUrl +'parking/icon_map.png'" mode="widthFix">
                                </image>
                              </view>
                              <view class="info ep1">
                                {{ item.address || '未设置地址' }}
                              </view>
                            </view>
                          </view>
                          <view class="right">
                            <view class="go">
                              <image :src="imageUrl +'parking/icon_go.png'" mode="widthFix">
                              </image>
                            </view>
                            <view class="km">{{ item.parkToUserDistance }}km</view>
                          </view>
                        </view>
                        <view class="row3 flex-cb">
                          <view class="zt">
                            <text :class="item.statusClass">{{ item.statusText }}</text>
                          </view>
                          <view class="per flex">
                            <view class="txt1">
                              <text :class="item.statusClass">{{ item.freeCount }}</text>
                            </view>
                            <view class="txt2">/ {{ item.spaceCount }}</view>
                          </view>
                          <view class="step flex-ac">
                            <view class="jd" :class="item.statusClass" :style="{ width: item.progressWidth }"></view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </block>
                </view>
              </view>

            </view>
          </view>

          <!-- 路边停车 -->
          <view class="tabcont" v-show="activeTab=='2'">
            <view class="laybox flex-col flex-c">
              <view class="lay-tit lay-tit2 flex-cc">
                <view class="bar"></view>
              </view>
              <view class="lay-cont">
                <view class="list">
                  <block v-for="(item,index) in processedParkList" :key="index">
                    <view class="li" v-if="item.typeKeyword=='out'" @click="jumpDetail(item)">
                      <view class="item">
                        <view class="near" v-if="false">距离最近</view>
                        <view class="row1">{{ item.name }}</view>
                        <view class="row2 flex-cb">
                          <view class="left">
                            <view class="dd flex-ac">
                              <view class="icon">
                                <image :src="imageUrl +'parking/icon_park.png'" mode="widthFix">
                                </image>
                              </view>
                              <view class="info flex-ac">
                                <view class="txt1">{{ item.typeKeyword == 'in' ? '道路停车' : '公共停车场' }}
                                  <text
                                      v-if="false">|
                                  </text>
                                </view>
                                <view class="tag" :class="item.tcClass" v-if="false">
                                  {{ item.tcText }}
                                </view>
                              </view>
                            </view>
                            <view class="dd flex-ac">
                              <view class="icon">
                                <image :src="imageUrl +'parking/icon_map.png'" mode="widthFix">
                                </image>
                              </view>
                              <view class="info ep1">
                                {{ item.address || '未设置地址' }}
                              </view>
                            </view>
                          </view>
                          <view class="right">
                            <view class="go">
                              <image :src="imageUrl +'parking/icon_go.png'" mode="widthFix">
                              </image>
                            </view>
                            <view class="km">{{ item.parkToUserDistance }}km</view>
                          </view>
                        </view>
                        <view class="row3 flex-cb">
                          <view class="zt">
                            <text :class="item.statusClass">{{ item.statusText }}</text>
                          </view>
                          <view class="per flex">
                            <view class="txt1">
                              <text :class="item.statusClass">{{ item.freeCount }}</text>
                            </view>
                            <view class="txt2">/ {{ item.spaceCount }}</view>
                          </view>
                          <view class="step flex-ac">
                            <view class="jd" :class="item.statusClass" :style="{ width: item.progressWidth }"></view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </block>
                </view>
              </view>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
    <!-- 底部导航保持不变 -->
    <view class="null"></view>
    <view class="foot">
      <image :src="imageUrl +'foot.png'" mode="widthFix" class="bgfoot-img"></image>
      <view class="foot-box">
        <view class="box-detail" @click="tab('/pages/index/index')">
          <image :src="imageUrl +'11.png'" mode="widthFix"></image>
          <view class="choice-color">首页</view>
        </view>
        <view class="box-detail" @click="tab('/pages/realTimeInfo/realTimeInfo')">
          <image :src="imageUrl +'2.png'" mode="widthFix"></image>
          <view>资讯</view>
        </view>
        <image :src="imageUrl +'5.png'" mode="widthFix" class="alone"
               @click="tab('/pages/parkingPlacePlace/parkingList')"></image>
        <view class="box-detail" @click="tab('/pages/order/order')">
          <image :src="imageUrl +'3.png'" mode="widthFix"></image>
          <view>订单</view>
        </view>
        <view class="box-detail" @click="tab('/pages/my/my')">
          <image :src="imageUrl +'4.png'" mode="widthFix"></image>
          <view>我的</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getParams} from '../../api/myHttps';
import mapBox from '@/components/map.vue';

export default {
  components: {
    mapBox
  },
  data() {
    return {
      latitude: 0,
      longitude: 0,
      markers: [],
      markersAll: [],
      markersIn: [],
      markersOut: [],
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      searchValue: '',
      activeTab: 0,
      tabs: ['全部', '道路停车', '公共停车场'],
      parkList: [],

    }
  },
  onShow() {
		this.searchValue = '';
    this.longitude = uni.getStorageSync("userLongitude");
    this.latitude = uni.getStorageSync("userLatitude");
    console.log("打印经纬度：", this.latitude, this.longitude);
    this.getNearParkList();
  },
  computed: {
    // 处理停车场数据，添加状态信息和样式类
    processedParkList() {
			this.markers = [];
			this.parkList = this.parkList.map(item => {
			  // 确定包月状态
			  const tcStatus = item.tc === 1 ? {
			        text: '可包月',
			        class: 'tag1'
			      } :
			      item.tc === 2 ? {
			        text: '不可包月',
			        class: 'tag2'
			      } : {
			        text: '',
			        class: ''
			      };

        let status, statusClass, progressWidth;
        let step = ((item.spaceCount - item.freeCount) / item.spaceCount * 100).toFixed(2);
        if (step < 30) {
          status = '充足';
          statusClass = 's1';
          progressWidth = '50%'; // (24/60)*100 ≈ 40%，但设计是50%以下显示充足
        } else if (step >= 30 && step < 45) {
          status = '一般';
          statusClass = 's2';
          progressWidth = '75%'; // (34/60)*100 ≈ 56%，但设计是30-45%显示一般
        } else {
          status = '紧张';
          statusClass = 's3';
          progressWidth = '90%'; // (54/60)*100 ≈ 90%，但设计是45%以上显示紧张
        }
        if (step === undefined || isNaN(step)) {
          step = 0;
        }
        progressWidth = (100 - step) + '%';

			  // let url =  "/pages/parkingPlace/parkingDetail3";
			  // if(item.typeKeyword == 'in'){
			  // 	url =  "/pages/parkingPlace/parkingDetail1";
			  // }else if (item.typeKeyword == 'out'){
			  // 	url =  "/pages/parkingPlace/parkingDetail2";
			  // }

			  let url = "/pages/parkingPlace/parkingDetail1";

			  let iconPath = this.imageUrl + "parking/" + item.typeKeyword + statusClass + ".png";
			  // console.log("打印iconPath：",iconPath);
			  item.tcText=tcStatus.text;
			  item.tcClass= tcStatus.class;
			  item.statusText= status;
			  item.statusClass= statusClass;
			  item.progressWidth=progressWidth;
			  item.step= step;
			  item.url= url;
				let markItem = {
			    id: item.id,
			    latitude: item.latitude,
			    longitude: item.longitude,
			    iconPath: iconPath,
			    width: 50,
			    height: 50,
					item:item,
			  };

			  this.markersAll.push(markItem);
			  if (item.typeKeyword == 'in') {
			    this.markersIn.push(markItem);
			  } else if (item.typeKeyword == 'out') {
			    this.markersOut.push(markItem);
			  }
				
				
				

			  return {
			    ...item,
			    tcText: tcStatus.text,
			    tcClass: tcStatus.class,
			    statusText: status,
			    statusClass: statusClass,
			    progressWidth: progressWidth,
			    step: step,
			    url: url
			  };
			});
			
			if (this.activeTab == 1) {
			  this.markers = this.markersIn;
			} else if (this.activeTab == 2) {
			  this.markers = this.markersOut;
			} else {
			  this.markers = this.markersAll;
			}
				let myMark = {
			    latitude: this.latitude,
			    longitude: this.longitude,
			    // iconPath: iconPath,
			    width: 40,
			    height: 40
			  };
				this.markers.push(myMark)
			// console.log("=---------",this.parkList);
			if (!this.searchValue) {
			  return this.parkList;
			}
			// 根据搜索值过滤parkList，并返回过滤后的结果
			return this.parkList.filter(item => {
			  // 使用includes方法进行模糊匹配
			  return item.name.toLowerCase().includes(this.searchValue.toLowerCase());
			}).map(item => {
			  // 对于匹配到的部分，可以使用HTML标签包裹以改变颜色或样式
			  let searchRegex = new RegExp(`(${this.escapeRegExp(this.searchValue)})`, 'gi');
			  item.highlightedName = item.name.replace(searchRegex, '<span style="color:red">$1</span>');
			  return item;
			});

    }
  },
  methods: {
		// 添加此方法用于转义正则表达式中的特殊字符
		escapeRegExp(string) {
		  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $&表示匹配整个字符串
		},
    scroll: function (e) {
      // console.log(e)
      this.old.scrollTop = e.detail.scrollTop
    },
    tabClick(id) {
			
      this.activeTab = id;
      if (id == 1) {
        this.markers = this.markersIn;
      } else if (id == 2) {
        this.markers = this.markersOut;
      } else {
        this.markers = this.markersAll;
      }
			let myMark = {
			  latitude: this.latitude,
			  longitude: this.longitude,
			  // iconPath: iconPath,
			  width: 40,
			  height: 40
			};
			this.markers.push(myMark)
    },
    tab(path) {
      uni.switchTab({
        url: path
      });
    },
    jumpDetail(item) {
      uni.navigateTo({
        url: item.url + '?parkItem=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    getNearParkList() {
      let params = {
        ownerId: uni.getStorageSync("ownerId"),
        current: 1,
        size: -1,
        parkType: "",
        // appId: uni.getStorageSync("appId"),
        userLatitude: this.latitude,
        userLongitude: this.longitude,
        destLatitude: "",
        destLongitude: "",
      };
      getParams('/city-mobile/platform/nearParkList', params).then((res) => {
        this.parkList = res.records;
      })
    },
  }
}
</script>
<style>
page {
  overflow: hidden;
  height: 100vh;
}
</style>
<style lang="scss" scoped>
@import '@/static/css/parking.scss'
</style>
